<!DOCTYPE HTML>
<html>
<head>
  <title></title>
	<style type="text/css">
		* {
			font: 400 16px/1.618 PingHei,"Microsoft Yahei","Noto Sans CJK SC",sans-serif,Emoji,'Segoe UI Symbol';
			box-sizing: border-box;
		}
		body {
			zoom: 1;
			min-width: 400px;
		}
		#osc-urls {
		}
		#osc-urls[v-cloak] {
			display: none;
		}
		.url {
			position: relative;
			text-align: center;
		}
		#osc-urls {
			display: flex;
			flex-wrap: wrap;
		}
		#osc-urls > section {
			width: 100%;
			text-align: center;
		}
		#osc-urls input {
			width: 100%;
			height: 1.75rem;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 2px 0;
			padding: 2px 4px;
		}
		#osc-urls .url input {
			padding-right: 70px;
		}
		#osc-urls #cusHostIP, #osc-urls #cusHostUrl {
			width: 50%;
		}
		.actions {
			position: absolute;
			top: 0;
			right: 2%;
			line-height: 1.75rem;
			height: 1.75rem;
			bottom: 0;
			margin: auto 0;
		}
		#text {
			vertical-align: text-top;
			width: 100%;
		}
		#text:before {
			content: '二维码';
		}
		#qrcodeContainer {
			margin-top: 10px;
		}
	</style>
	<link type="text/css" rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
	
	<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="../node_modules/jquery-qrcode/dist/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript" src="popup.js"></script>
</head>
<body>
	<div id="osc-urls" v-cloak>
		<template v-if="isOSC">
			<input title="当前地址" type="text" v-model="currUrl">
			<br>
			<input title="填写本机IP地址" type="text" v-model="cusHostIP" id="cusHostIP">
			<input title="填写子域名" type="text" v-model="cusHostUrl" id="cusHostUrl">
			<br>
			<section class="urls">
				<div class="url" v-for="url in urls">
					<input type="text" v-model="url">
					<span class="actions">
						<span title="打开" v-on:click="replace(url)" class="fa fa-link"></span>
						<span title="新窗口打开" v-on:click="open(url)" class="fa fa-external-link"></span>
						<span title="复制链接" v-on:click="copy" class="fa fa-copy"></span>
						<span title="二维码" v-on:click="qr(url)" class="fa fa-qrcode"></span>
					</span>
				</div>
			</section>
		</template>
		<section>
			<textarea id="text" v-model="qrText"></textarea>
			<div id="qrcodeContainer" v-bind:qr="qrcode"></div>
		</section>
	</div>
</body>
</html>
